@import './base.scss';

:root {
  /* 待接单 */
  --wait-tip-border-bg-color: #8f99eb;
  --wait-task-bg-color: #eef0ff;
  --wait-task-tag-bg-color: #8f99eb33;
  --wait-task-tag-color: #8f99eb;

  /* 进行中 */

  --going-tip-border-bg-color: #61da83;
  --going-task-bg-color: #f2fdf5;
  --going-task-tag-bg-color: #78f19a33;
  --going-task-tag-color: #61da83;

  /* 已完成 */
  --completed-tip-border-bg-color: #8dceea;
  --completed-task-bg-color: #ebf9ff;
  --completed-task-tag-bg-color: #7ec8e733;
  --completed-task-tag-color: #05b4fe;

  /* 取消 */
  --cancel-tip-border-bg-color: #e88b8c;
  --cancel-task-bg-color: #fff2f2;
  --cancel-task-tag-bg-color: #e88b8c33;
  --cancel-task-tag-color: #e88b8c;

  /* 危險等級 */

  --urgent-bg-color-1: #7cc8ca33;
  --urgent-color-1: #0cb69f;

  --urgent-bg-color-2: #697e0f33;
  --urgent-color-2: #6e8f34;

  --urgent-bg-color-3: #e88b8c33;
  --urgent-color-3: #e88b8c;
}

//任务清单左侧 竖线
@mixin task-tip-border($h, $top, $left) {
  content: '';
  position: absolute;
  width: 2px;
  height: $h;
  top: $top;
  left: $left;
}

//任务清单的右侧 三点 按钮
@mixin task-tip-right-btn($top, $right) {
  content: '…';
  position: absolute;
  color: #263b6b;
  transform: rotate(90deg);
  top: $top;
  right: $right;
}

//设置home页面的menuI item

@mixin home-menu-item($background, $box-shadow-color, $image-index, $after-color) {
  background: $background;
  box-shadow: -3px 7px 13px 0px $box-shadow-color;

  &::before {
    background: url('@/assets/main/home/vector#{$image-index}.png');
    background-size: 50% 100%;
    content: '';
    position: absolute;
    left: 34px;
    width: 100px;
    top: 0px;
    height: 50px;
  }

  &::after {
    content: '→';
    position: absolute;
    right: 16px;
    top: 16px;
    color: $after-color;
  }

  .item-icon {
    background: url('@/assets/main/home/menu-item#{$image-index}.png');
    background-size: 100%;
  }
}

//列表清单颜色
@mixin task-list-box-info($type) {
  position: relative;
  background: var(--#{$type}-task-bg-color) !important;

  &::before {
    background: var(--#{$type}-tip-border-bg-color);
  }

  .tag-item {
    background: var(--#{$type}-task-tag-bg-color);
    color: var(--#{$type}-task-tag-color);
  }

  .task-name {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #2c406e;
  }

  .task-time {
    margin-top: 8px;
    margin-left: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #9aa8c7;
  }

  .task-tag {
    margin-top: 8px;
    margin-bottom: 8px;
    height: 26px;
    @extend .f-s-w, .a-i-c;

    .tag-item {
      border-radius: 3px;
      font-size: 12px;
      padding: 4px 8px;
      margin: 2px 6px;
      zoom: 0.84; //12px =>10px
    }
  }
}

@mixin title-category($margin-top) {
  .title-category {
    @extend .f-b, .a-i-c;
    margin-top: $margin-top;

    .category-title {
      color: #12175e;
      font-size: 24px;
      font-weight: 700;
    }

    .category-title2 {
      @extend .category-title;
      font-size: 20px;
    }

    .category-title-btn {
      font-size: 12px;
      font-weight: 400;
      color: rgba(57, 63, 147, 1);
    }

    .category-title-btn-time {
      position: relative;

      &::before {
        position: absolute;
        content: '';
        background: url('@/assets/main/imgs/category-btn-time.png');
        background-size: 14px 14px;
        top: 0px;
        left: -18px;
        width: 14px;
        height: 14px;
      }
    }
  }
}

@mixin circle($background, $size) {
  width: $size;
  height: $size;
  background: $background;
  border-radius: 50%;
}

.task-wait {
  @include task-list-box-info(wait);
}

.task-going {
  @include task-list-box-info(going);
}

.task-completed {
  @include task-list-box-info(completed);
}

.task-cancel {
  @include task-list-box-info(cancel);
}

/**級別*/
@mixin tag-urgent-color($level) {
  .tag-urgent-#{$level} {
    background: var(--urgent-bg-color-#{$level});
    color: var(--urgent-color-#{$level});
  }
}

// @include tag-urgent-color(1);
// @include tag-urgent-color(2);
// @include tag-urgent-color(3);
.info-timeout {
  border: 1px solid rgba(204, 18, 18, 1);
}